@use '../../node_modules/@angular/material' as mat;

@use './gio-palettes' as palettes;

/**
 * Gravitee.io version of bootstrap "badge" element
 */
.gio-badge {
  margin-left: 8px;
  min-width: 10px;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 10px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: mat.get-color-from-palette(palettes.$gio-primary-palette, light);
  color: mat.get-color-from-palette(palettes.$gio-primary-palette, light-contrast);
  text-transform: capitalize;
}

.gio-badge-accent {
  @extend .gio-badge;
  background-color: mat.get-color-from-palette(palettes.$gio-accent-palette, medium);
  color: mat.get-color-from-palette(palettes.$gio-accent-palette, medium-contrast);
}

.gio-badge-success {
  @extend .gio-badge;
  background-color: mat.get-color-from-palette(palettes.$gio-success-palette, medium);
  color: mat.get-color-from-palette(palettes.$gio-success-palette, medium-contrast);
}

.gio-badge-error {
  @extend .gio-badge;
  background-color: mat.get-color-from-palette(palettes.$gio-error-palette, medium);
  color: mat.get-color-from-palette(palettes.$gio-error-palette, medium-contrast);
}
